<template>
    <a-modal v-model:visible="cardShow" title="银行卡上传" :width="850" @ok="cardOk" :destroyOnClose="true" :z-index="20" @cancel="changeCard">
        <a-form ref="cardForm" :model="cardFormState" name="dynamic_rule" class="upDateCard"
            style="display: flex;flex-wrap: wrap;justify-content: space-between;width: 850px;">
            <div>
                <a-form-item label="选择银行" name="bank_name" :rules="[{ required: true, message: '请选择银行' }]">
                    <a-select v-model:value="cardFormState.bank_name" show-search placeholder="请输入银行" style="width: 200px"
                        :default-active-first-option="false" :show-arrow="false" :filter-option="false"
                        :not-found-content="null" :options="bankOptions" @search="handleSearch"
                        @change="handleChange"></a-select>
                </a-form-item>
                <a-form-item label="输入卡号" name="card" :rules="[{ required: true, message: '请输入银行卡号' }]">
                    <a-input v-model:value="cardFormState.card" />
                </a-form-item>
                <a-form-item label="开户行" name="bank"
                    :rules="[{ required: true, message: '请输入开户行' }, { validator: share.validate }]">
                    <a-input v-model:value="cardFormState.bank" />
                </a-form-item>
                <a-form-item label="户名" name="account_name"
                    :rules="[{ required: true, message: '请输入户名' }, { validator: share.validate }]">
                    <a-input v-model:value="cardFormState.account_name" />
                </a-form-item>
                <a-form-item label="是否默认" name="silent">
                    <a-radio-group v-model:value="cardFormState.silent" name="silent"
                        :rules="[{ required: true, message: '请选择是否默认' }]">
                        <a-radio :value="0">正常</a-radio>
                        <a-radio :value="1">默认</a-radio>
                    </a-radio-group>
                </a-form-item>
            </div>
        </a-form>

    </a-modal>
</template>

<!-- 技师上传银行卡模块 -->
<script setup>
import { ref, defineProps, defineEmits, watch } from 'vue';
import { techStatAPI, imageAPI } from '../../../../api/management';
import { useUserData } from '../../../../stores/userData';
import { message } from 'ant-design-vue';
import share from '../../../../util/commnet'
import back from '../../../../util/bank/back';
import banks from '../../../../util/bank/data1.js'

const store = useUserData();    //pinia
const cardShow = ref(false);
const cardForm = ref(null);
const cardFormState = ref({
    bank_name: '',
    card: '',
    account_name: '',
    bank: '',
    uid: '',
    silent: 0
})


const emit = defineEmits(['setShow'])       //关闭组件的方法
const pros = defineProps({
    uid:{                       //拿到uid
        type:String,
        default:''
    },
    shows:{                     //是否关闭组件
        type:Boolean,
        default:false
    }
})

watch(                              //监听是否关闭健康证上传模块
    ()=>pros.shows,
    async(n,o)=>{
        if(n && pros.uid){                      //当需要显示模块且存在uid时 拉取数据
            cardFormState.value.uid = pros.uid
        }
        cardShow.value = n;
    }
)

// 过滤计算银行的模糊查询
function getBankOptions(query) {   //过滤
    return banks.filter(bank => bank.BackName.toLowerCase().includes(query.toLowerCase()))
        .map(bank => ({ value: bank.code, label: bank.BackName }));
}

const bankOptions = ref(banks.map(bank => ({ value: bank.code, label: bank.BackName })));

const handleSearch = (query) => {   //点击搜素时
    bankOptions.value = getBankOptions(query);
};


const handleChange = (val) => {         //改变值
    cardFormState.bank_name = val;
};

const cardOk = async () => {
    cardForm.value.validateFields()
        .then(async r => {
            let bank_request = await back.getBankInfo(cardFormState.value.card);
            if (bank_request.code == 1) {
                message.error(bank_request.message);
                return;
            }
            let imgData = await imageAPI(`selBank|${cardFormState.value.bank_name}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
            if (imgData.code == 406) {
                message.error("账号失效");
                router.replace({ name: 'login' });
                return;
            } else if (imgData.code != 200) {
                message.error(imgData.message);
                return
            }

            let re = await back.getImageColor(imgData.data);
            let res = await techStatAPI(`updateCard|${cardFormState.value.uid}|${bank_request.data.bankName}|${bank_request.data.bank}|${cardFormState.value.card}|${cardFormState.value.bank}|${cardFormState.value.account_name}|${imgData.name}|rgba(${re.r},${re.g},${re.b},1)|${cardFormState.value.silent}|${store.data.token}|${store.data.uuid}|${store.data.phone}`)
            if (!res || res.code == 406) {
                message.error("账号失效");
                router.replace({ name: 'login' });
                return;
            } else if (res.code != 200) {
                message.error(res.message);
                return
            }
            message.success("添加成功")
            cardForm.value.resetFields();
            emit('setShow',false);

        }
        )
        .catch(err => console.log(err))
}

const changeCard  = ()=>{
    cardForm.value.resetFields();
    emit('setShow',false);
}
</script>